<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>数据展示</h1>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody id="tbody">
        <!-- 动态创建 -->
        <!-- <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr> -->
      </tbody>
    </table>

    <script>
      /*
            1. 确定数据展示格式（table,ul ...）
            2. 转换数据 数组=>HTML
            3. 将HTML渲染到页面（innerHTML）
        */
      const users = [
        { id: 1, name: "jack", age: 20, gender: "1" },
        { id: 2, name: "lili", age: 21, gender: "2" },
      ];

      //  数组=>表格
      const usersTrs = users.reduce((str, el) => {
        str += `
        <tr>
            <td>${el.id}</td>
            <td>${el.name}</td>
            <td>${el.age}</td>
            <td>${el.gender === "1" ? "男" : "女"}</td>
        </tr>
        `;
        return str;
      }, "");

      console.log(users);
      console.log(usersTrs);
      tbody.innerHTML = usersTrs;
    </script>
  </body>
</html>
